<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="imgs/huawei.ico" />
    <!-- 1. 引入bootstrap.css -->
    <link rel="stylesheet" href="../../plugins/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>个人中心</title>


    <!-- 必须先引入jquery.min.js -->
    <script src="../../plugins/plugins/jquery.min.js"></script>
    <!-- 引入bootstrap.js -->
    <script src="../../plugins/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <!-- 导入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>

    <style>
        img {
            width: 177px;
            height: 155px;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            display: block;
            content: '';
            clear: both;
            visibility: hidden;
            height: 0;
        }

        h3 {
            text-align: left;
        }

        .container {
            width: 800px;
            /* border: 20px solid black; */
            margin: 0 auto;
        }

        .box {
            float: left;
            width: 50%;
            height: 50px;
        }

        .left {
            background-color: pink;
        }

        .right {
            background-color: purple;
        }

        .content-box {
            border: 5px solid green;
            padding: 10px;
            /*box-sizing: content-box;*/
        }

        .border-box {
            border: 5px solid green;
            padding: 10px;
            box-sizing: border-box;
        }

        .a1 {
            border: 1px solid rgb(0, 0, 0);
            margin: 20px;
            width: 100px;
            height: 50px;
            float: left;
            text-align: center;
            vertical-align:middle; 
            line-height:50px;
            background-color: rgb(230, 230, 230);
        }

        .a2 {
            text-align: center;
            margin-bottom: 100px;
        }
    </style>
</head>

<body>
    <!-- 导航begin -->
    <div class="container-fluid">
        <!-- 定义一行 -->
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="../RH/personal.html">苹果商城</a>
                    </div>
                    <div class="collapse navbar-collapse " id="example-navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">登录</a></li>
                            <li class="active"><a href="../LJL/index.html">首页</a>
                            </li>
                            <li><a href="../RHW/cart.html">购物车</a></li>

                            <li><a href="../RH/login.html" onclick="exit()">安全退出</a></li>
                            <li>
                                <p style="display: table-cell; vertical-align: middle; "><a
                                        href="../RH/personal.html"><img src="../../imgs/用户头像.png"
                                            style="width: 50px;height: 50px;border-radius: 50%;" class="img-responsive"
                                            alt=""></a></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航end -->

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <ul class="nav nav-pills  nav-stacked" id='left_bar'>
                    <li role="presentation" class="active"><a href="#">个人资料</a></li>
                    <li role="presentation"><a href="#">数据汇总</a></li>
                    <li role="presentation"><a href="#">数据管理</a></li>
                </ul>
            </div>



            <div class="col-md-10" id="right">
                <!-- ----个人资料begin-------------------------------------------------------------------- -->
                <div id="inner01">
                    <div class="clearfix">
                        <h3>个人信息</h3>
                        <div class="container">
                            用户名：admin<br><br>
                            昵称：<input type="text" placeholder='admin'><br><br>
                            性别：
                            男性
                            <input type="radio" checked="checked" name="Sex" value="male" />

                            女性
                            <input type="radio" name="Sex" value="female" />
                            <!-- 性别：<input type="radio">男<input type="radio">女<input type="radio">保密<br><br> -->
                            <!-- <div class="box left">001</div>
                          <div class="box right">002</div> -->
                        </div>
                    </div>
                    <hr />


                    <div class="clearfix">
                        <h3>账号安全</h3>
                        <div class="container">

                            密保手机：123456789<br><br>
                            绑定微信：123456789<br><br>
                            绑定QQ：123456789<br><br>
                            密码：<input type="text" placeholder='······'><br><br>
                            <button>修改密码</button>
                            <!-- <div class="box left content-box">003</div>
                          <div class="box right content-box">004</div> -->
                        </div>
                        <!-- 实现效果则需改 width = 400px - 5px*2 - 10px*2 = 370px -->
                    </div>
                    <hr />



                    <div class="clearfix">
                        <h3>兴趣爱好</h3>
                        <div class="container">
                            <div>
                                <div class="a1">图书音像 </div>
                                <div class="a1">家用电器
                                </div>
                                <div class="a1">手机/数码
                                </div>
                                <div class="a1">
                                    电脑/办公

                                </div>
                                <div class="a1">家居/家具
                                </div>
                                <div class="a1"> 服饰内衣
                                </div>
                                <div class="a1"> 个护化妆
                                </div>
                                <div class="a1"> 鞋靴/箱包/钟表
                                </div>
                                <div class="a1">运动健康
                                </div>
                                <div class="a1">汽车用品
                                </div>
                                <div class="a1"> 母婴/玩具乐器
                                </div>
                                <div class="a1"> 食品饮料 </div>
                                <div class="a1">彩票/旅行/充值</div>
                                <br>
                            </div>

                        </div>

                    </div>
                    <div class="a2"><button>提交</button></div>
                </div>
                <!-- ----个人资料end-------------------------------------------------------------------- -->

                <!-- ----数据汇总begin-------------------------------------------------------------------- -->

                <div id="inner02" hidden>
                    <ul class="nav nav-tabs" id="main_bar">
                        <li role="presentation" class="active"><a href="#">性能对比</a></li>
                        <li role="presentation"><a href="#">价格对比</a></li>
                        <li role="presentation"><a href="#">产品销量</a></li>
                        <li role="presentation"><a href="#">用户评价</a></li>
                    </ul>
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8" id="content">
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!-- 数据管理start -->
                <div id="inner03" hidden>
                    <table class="table table-hover">
                        <tbody>

                        </tbody>

                    </table>
                </div>
                <!-- 数据管理end -->

            </div>
        </div>
    </div>

    <script>

        function exit() {
            alert("成功退出")
        }

        $(function () {
            // 点击左侧导航，右面内容发生变化
            $('#left_bar li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                let label = $(this).text();
                if (label == '个人资料') {
                    $('#inner01').show(100).siblings().hide();
                } else if (label == '数据汇总') {
                    $('#inner02').show(100).siblings().hide();
                    plot_cpu('../RH/data/cpu_mean.json'); //cpu 图  性能排行榜 搞定
                } else if (label == '数据管理') {
                    $('#inner03').show(100).siblings().hide();
                }
            })
            data_manage()


            $('#main_bar li').click(function () {
                // 点击让该标签处于活动状态
                $(this).addClass('active').siblings().removeClass('active');

                // 修改图表显示
                let label = $(this).text();
                if (label == '性能对比') {
                    plot_cpu('../RH/data/cpu_mean.json'); //cpu 图  性能排行榜 搞定
                } else if (label == '价格对比') {
                    plot_bar('../RH/data/price_mean.json');  //柱状图 价格 搞定
                } else if (label == '产品销量') {
                    plot_pie('../RH/data/sale_mean.json');  //饼状图  销量  搞定
                } else if (label == '用户评价') {
                    plot_eva('../RH/data/evaluate_mean.json'); //eva 图  用户评价 
                }
            })



            var myChart;

            function plot_cpu(url) {
                $.get(url,function(data){
                        
                        dd=[];
                        for(item in data){
                            j={"value":data[item],"name":item+'月'};
                            dd.push(j);
                        }
                        if(myChart){
                            myChart.dispose();
                        }
                        myChart = echarts.init(document.getElementById('content')
                        ,null,{
                            width: 600,
                            height: 600
                        }
                        );
                       
                        console.log(data['CPU']);
                        const cities=[];
                        const my_data=[];
                        const cpu_data=[];
                        const gpu_data=[];
                        for(item in data['CPU']){
                            cities.push(item);
                            a = data['CPU'][item];
                            cpu_data.push(a);
                            b = data['GPU'][item]
                            gpu_data.push(b);
                        }
                        console.log(cities);
                        console.log(cpu_data);
                        console.log(gpu_data);




                    // prettier-ignore
                    const barHeight = 50;
                    let  option = {
                            title: {
                                text: '性能排行榜'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                type: 'shadow'
                                }
                            },
                            legend: {},
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                // data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                                data: cities
                            },
                            series: [
                                {
                                name: 'CPU',
                                type: 'bar',
                                data: cpu_data
                                },
                                {
                                name: 'GPU',
                                type: 'bar',
                                data: gpu_data
                                }
                            ]
                            };

                            option && myChart.setOption(option);

                })
            }//end unction plot_polar

            function plot_bar(url) {
                $.get(url, function (data) {
                    // console.log(data['上海-嘉定区']);
                    let area = [];
                    let salary = []
                    for (item in data) {
                        area.push(item);
                        salary.push(data[item])
                    }
                    console.log(area.length, salary.length);
                    if (myChart) {
                        myChart.dispose();
                    }
                    myChart = echarts.init(document.getElementById('content')
                        , null, {
                        width: 800,
                        height: 500
                    }
                    );
                    // 指定图表的配置项和数据
                    let option = {
                        title: {
                            text: '价格对比'
                        },
                        tooltip: {},
                        legend: {
                            data: ['价格']
                        },
                        xAxis: {
                            data: area
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '价格',
                                type: 'bar',
                                data: salary
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                })
            }//end plot_bar

            function plot_pie(url) {
                $.get(url, function (data) {

                    dd = [];
                    for (item in data) {
                        j = { "value": data[item], "name": item };
                        dd.push(j);
                    }
                    if (myChart) {
                        myChart.dispose();
                    }
                    myChart = echarts.init(document.getElementById('content')
                        , null, {
                        width: 800,
                        height: 700
                    }
                    );

                    // 指定图表的配置项和数据
                    let option = {
                        title: {
                            text: '产品销量',
                            subtext: '来自京东',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'horizontal',
                            left: 'centre',
                            // type: 'scroll',
                            // orient: 'vertical',
                            // right: 0,
                            top: 600,
                            // bottom: 20,
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: dd,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                })
            }//end plot_pie

            function plot_eva(url) {
                $.get(url,function(data){
                        
                        // dd=[];
                        // for(item in data){
                        //     j={"value":data[item],"name":item+'月'};
                        //     dd.push(j);
                        // }
                        if(myChart){
                            myChart.dispose();
                        }
                        myChart = echarts.init(document.getElementById('content')
                        ,null,{
                            width: 600,
                            height: 600
                        }
                        );
                       
                        // console.log(data['CPU']);
                        const cities=[];
                        const my_data=[];
                        const cpu_data=[];
                        const gpu_data=[];
                        for(item in data['好评数量']){
                            cities.push(item);
                            a = data['好评数量'][item];
                            cpu_data.push(a);
                            b = data['差评数量'][item]
                            gpu_data.push(b);
                        }
                        console.log(cities);
                        console.log(cpu_data);
                        console.log(gpu_data);




                    // prettier-ignore
                    const barHeight = 50;
                    let  option = {
                            title: {
                                text: '评价对比图'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                type: 'shadow'
                                }
                            },
                            legend: {},
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                data: cities
                            },
                            series: [
                                {
                                name: '好评数量',
                                type: 'bar',
                                data: cpu_data
                                },
                                {
                                name: '差评数量',
                                type: 'bar',
                                data: gpu_data
                                }
                            ]
                            };

                            option && myChart.setOption(option);

                })
            }//end unction plot_eva
            //  ----数据汇总end-------------------------------------------------------------------- -

            // ------数据管理begin--------------------------------------------------------------------------------------------
            function data_manage() {
                let table = $('#inner03>table>tbody')
                $.get('../LJL/data/product.json', function (data) {
                    for (item of data) {
                        table.append(`
                            <tr>
                                <td>${item['id']}</td>
                                <td>${item['name']}</td>
                                <td>${item['price']}</td>
                                <td>${item['desc']}</td>
                                <td>${item['remark']}</td>
                            </tr>
                            
                            `)
                    }
                })
            }
            // --------------------数据管理end----------------------------------------------------------------------------



        })
    </script>
</body>

</html>